<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

  <style>
    .custom-dialog {
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 5px;
      font-family: Arial, sans-serif;
    }


    .custom-select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s ease;
    }

    .custom-select:focus {
      border-color: #409eff;
    }

  </style>

</head>

<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>


<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="changeStatusBtn" id="changeStatusBtn">更改状态</a>
</script>


<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/ajax.js"></script>
<script>

layui.use(function () {
  var table = layui.table,
          form = layui.form,
          layer = layui.layer,
          $ = layui.jquery;
  $(function () {
    showAll();
  });


  function showAll() {


    layui.jquery.ajax({
      url: "../../order?op=findall",
      type: "GET",
      dataType: "json",
      success: function (res) {
        table.render({
          elem: '#test'
          ,toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
          defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
          }]
          ,title: '订单数据表'
          ,cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{field:'ono', title:'订单编号', width:120, fixed: 'left', unresize: true, sort: true}
            /**,{field : 'fpics', width :120, title : '商品图片', templet : function(res){
				var fpics = res.fpics.split("|");	//截去分隔符将其转为数组
				var fpicInfo = '<div id="fpics'+ res.fno +'" style="height:100%;weidth:100%">';
				for(var i=0; i<fpics.length; i++){
					fpicInfo += '<img  src=images/mate60.png'+fpics[i]+' />'
				}
				fpicInfo += "</div>";
				return fpicInfo;
			} }**/
            //用户编号
            ,{field:'gname', title:'商品名称', width:120, edit: 'text'}
            ,{field:'deNum', title:'商品数量', width:120,edit: 'text'}
            ,{field:'payprice', title:"总价",width:120, edit: 'text'}
            ,{field:'address', title:'收货地址', width:120}
            ,{field:'consignee', title:'收货人', width:120}
            ,{field:'ostate', title:'订单状态', width:120,templet: function (res) {
                if (res.ostate == 1) {
                  return "<span>待付款</span>";
                } else if (res.ostate == 2){
                  return "<span>待发货</span>";
                } else if (res.ostate == 3){
                  return "<span>待收货</span>";
                }else if (res.ostate == 4){
                  return "<span>已完成</span>";
                }else if (res.ostate == 5){
                  return "<span>待退款</span>";
                }else {
                  return "<span>退款完成</span>";
                }
              }}
            ,{field:'paytime', title:'支付日期', width:150 }
            ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
          ]],
          data: res.data,
          count: res.data.length,
          page: {
            limit: 10, // 每页显示的数据量
            limits: [10, 20, 30], // 可选的数据量选项
          },
        });

      }
    });
  }





  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
        break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
        break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
        break;

            //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
        break;
    };
  });

// 监听行工具事件

  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'changeStatusBtn'){
      layer.open({
        title: '更改状态',
        content: '<div class="custom-dialog"><div class="layui-form-item"><label class="layui-form-label">请选择状态:</label><div class="layui-input-block"><select id="statusSelect" lay-filter="statusFilter" class="custom-select"></select></div></div></div>',
        btn: ['确定'],
        success: function(){
          var selectHtml =
                  '<option value="1">待付款</option>' +
                  '<option value="2">待发货</option>' +
                  '<option value="3">发货</option>' +
                  '<option value="4">已完成</option>' +
                  '<option value="5">退款</option>' +
                  '<option value="6">退款完成</option>';
          $('#statusSelect').html(selectHtml);
          layui.form.render('select'); // 重新渲染select选择框
        },
        yes: function(index, layer) {
          var selectedValue = $('#statusSelect').val();
          console.log(selectedValue); // 打印选中的值

          // 发送请求到后端，修改状态
          $.get("../../order?op=update", {ono: data.ono, ostate: selectedValue}, function (rs) {
            console.log(rs.code);
            if (rs.code === 1) {
              obj.update({
                ostate: selectedValue  // 更新表格中的数据状态
              });
              layui.form.render('ostate');
              layer.close(index); // 关闭当前弹框
            } else {
              location.reload();  // 刷新页面
            }
          }, 'json');
        }
      });
    }
  });
});

</script>

</body>
</html>
